<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >
    <title></title>
    <script src="js/jquery-1.12.3.min.js"></script>
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      .divbox{
        width: 100vw;
        height: 95vh;
        background: #ccc;
        position: relative;
      }
      .div{
        width: 5px;
        height: 5px;
        background: #f00;
        border-radius: 50%;
        position: absolute;
      }
      .div2{
        background: #00f;
      }
      .hover_div{
        background: #000;
      }
    </style>



</head>
<body>
  <div class="divbox" id="div_box">

  </div>
  <button id="button" type="button" name="button">点一下？？</button>


</body>



<script type="text/javascript">
	
	// 93 61
var zuoshangList = [{ "x": 90, "y": 64 }, { "x": 80, "y": 64 }, { "x": 80, "y": 56 }, { "x": 90, "y": 56 }, { "x": 100, "y": 56 }, { "x": 100, "y": 64 }, { "x": 100, "y": 72 }, { "x": 90, "y": 72 }, { "x": 80, "y": 72 }, { "x": 70, "y": 64 }, { "x": 70, "y": 56 }, { "x": 70, "y": 48 }, { "x": 80, "y": 48 }, { "x": 90, "y": 48 }, { "x": 100, "y": 48 }, { "x": 110, "y": 48 }, { "x": 110, "y": 56 }, { "x": 110, "y": 64 }, { "x": 110, "y": 72 }, { "x": 110, "y": 80 }, { "x": 100, "y": 80 }, { "x": 90, "y": 80 }, { "x": 80, "y": 80 }, { "x": 70, "y": 80 }, { "x": 70, "y": 72 }, { "x": 60, "y": 64 }, { "x": 60, "y": 56 }, { "x": 60, "y": 48 }, { "x": 60, "y": 40 }, { "x": 70, "y": 40 }, { "x": 80, "y": 40 }, { "x": 90, "y": 40 }, { "x": 100, "y": 40 }, { "x": 110, "y": 40 }, { "x": 120, "y": 40 }, { "x": 120, "y": 48 }, { "x": 120, "y": 56 }, { "x": 120, "y": 64 }, { "x": 120, "y": 72 }, { "x": 120, "y": 80 }, { "x": 120, "y": 88 }, { "x": 110, "y": 88 }, { "x": 100, "y": 88 }, { "x": 90, "y": 88 }, { "x": 80, "y": 88 }, { "x": 60, "y": 72 }, { "x": 50, "y": 64 }, { "x": 50, "y": 56 }, { "x": 50, "y": 48 }, { "x": 50, "y": 40 }, { "x": 60, "y": 32 }, { "x": 70, "y": 32 }, { "x": 80, "y": 32 }, { "x": 90, "y": 32 }, { "x": 100, "y": 32 }, { "x": 110, "y": 32 }, { "x": 120, "y": 32 }, { "x": 120, "y": 96 }, { "x": 110, "y": 96 }, { "x": 100, "y": 96 }, { "x": 90, "y": 96 }]
// 62 124
var zuozhongList = [{ "x": 70, "y": 128 }, { "x": 60, "y": 128 }, { "x": 60, "y": 120 }, { "x": 70, "y": 120 }, { "x": 80, "y": 120 }, { "x": 80, "y": 128 }, { "x": 80, "y": 136 }, { "x": 70, "y": 136 }, { "x": 60, "y": 136 }, { "x": 50, "y": 128 }, { "x": 50, "y": 120 }, { "x": 50, "y": 112 }, { "x": 60, "y": 112 }, { "x": 70, "y": 112 }, { "x": 80, "y": 112 }, { "x": 90, "y": 112 }, { "x": 90, "y": 120 }, { "x": 90, "y": 128 }, { "x": 90, "y": 136 }, { "x": 90, "y": 144 }, { "x": 80, "y": 144 }, { "x": 70, "y": 144 }, { "x": 60, "y": 144 }, { "x": 50, "y": 144 }, { "x": 50, "y": 136 }, { "x": 40, "y": 128 }, { "x": 40, "y": 120 }, { "x": 40, "y": 112 }, { "x": 40, "y": 104 }, { "x": 50, "y": 104 }, { "x": 60, "y": 104 }, { "x": 70, "y": 104 }, { "x": 80, "y": 104 }, { "x": 90, "y": 104 }, { "x": 100, "y": 112 }, { "x": 100, "y": 120 }, { "x": 100, "y": 128 }, { "x": 100, "y": 136 }, { "x": 80, "y": 152 }, { "x": 70, "y": 152 }, { "x": 60, "y": 152 }, { "x": 50, "y": 152 }, { "x": 40, "y": 152 }, { "x": 40, "y": 144 }, { "x": 40, "y": 136 }, { "x": 40, "y": 96 }, { "x": 50, "y": 96 }, { "x": 60, "y": 96 }, { "x": 70, "y": 96 }, { "x": 80, "y": 96 }, { "x": 110, "y": 112 }, { "x": 110, "y": 120 }, { "x": 110, "y": 128 }, { "x": 110, "y": 136 }, { "x": 70, "y": 160 }, { "x": 60, "y": 160 }, { "x": 50, "y": 160 }, { "x": 40, "y": 160 }, { "x": 40, "y": 88 }, { "x": 50, "y": 88 }, { "x": 60, "y": 88 }, { "x": 70, "y": 88 }, { "x": 50, "y": 168 }, { "x": 40, "y": 168 }, { "x": 40, "y": 80 }, { "x": 50, "y": 80 }, { "x": 60, "y": 80 }, { "x": 40, "y": 72 }, { "x": 50, "y": 72 }]
// 84 187
var zuoxiaList = [{ "x": 90, "y": 192 }, { "x": 80, "y": 192 }, { "x": 80, "y": 184 }, { "x": 90, "y": 184 }, { "x": 100, "y": 184 }, { "x": 100, "y": 192 }, { "x": 100, "y": 200 }, { "x": 90, "y": 200 }, { "x": 80, "y": 200 }, { "x": 70, "y": 192 }, { "x": 70, "y": 184 }, { "x": 70, "y": 176 }, { "x": 80, "y": 176 }, { "x": 90, "y": 176 }, { "x": 100, "y": 176 }, { "x": 110, "y": 176 }, { "x": 110, "y": 184 }, { "x": 110, "y": 192 }, { "x": 110, "y": 200 }, { "x": 110, "y": 208 }, { "x": 100, "y": 208 }, { "x": 90, "y": 208 }, { "x": 80, "y": 208 }, { "x": 70, "y": 208 }, { "x": 70, "y": 200 }, { "x": 60, "y": 192 }, { "x": 60, "y": 184 }, { "x": 60, "y": 176 }, { "x": 60, "y": 168 }, { "x": 70, "y": 168 }, { "x": 80, "y": 168 }, { "x": 90, "y": 168 }, { "x": 100, "y": 168 }, { "x": 110, "y": 168 }, { "x": 120, "y": 168 }, { "x": 120, "y": 176 }, { "x": 120, "y": 184 }, { "x": 120, "y": 192 }, { "x": 120, "y": 200 }, { "x": 120, "y": 208 }, { "x": 120, "y": 216 }, { "x": 110, "y": 216 }, { "x": 100, "y": 216 }, { "x": 90, "y": 216 }, { "x": 80, "y": 216 }, { "x": 70, "y": 216 }, { "x": 60, "y": 208 }, { "x": 60, "y": 200 }, { "x": 50, "y": 192 }, { "x": 50, "y": 184 }, { "x": 50, "y": 176 }, { "x": 70, "y": 160 }, { "x": 80, "y": 160 }, { "x": 90, "y": 160 }, { "x": 100, "y": 160 }, { "x": 110, "y": 160 }, { "x": 120, "y": 160 }, { "x": 120, "y": 224 }, { "x": 110, "y": 224 }, { "x": 100, "y": 224 }, { "x": 90, "y": 224 }, { "x": 80, "y": 224 }, { "x": 50, "y": 200 }, { "x": 80, "y": 152 }, { "x": 90, "y": 152 }, { "x": 100, "y": 152 }, { "x": 110, "y": 152 }, { "x": 120, "y": 152 }, { "x": 90, "y": 144 }, { "x": 100, "y": 144 }, { "x": 110, "y": 144 }, { "x": 120, "y": 144 }, { "x": 100, "y": 136 }, { "x": 110, "y": 136 }]
// 165.61
var youshangList = [{"x":170,"y":63},{"x":160,"y":63},{"x":160,"y":56},{"x":170,"y":56},{"x":180,"y":56},{"x":180,"y":63},{"x":180,"y":70},{"x":170,"y":70},{"x":160,"y":70},{"x":150,"y":63},{"x":150,"y":56},{"x":150,"y":49},{"x":160,"y":49},{"x":170,"y":49},{"x":180,"y":49},{"x":190,"y":49},{"x":190,"y":56},{"x":190,"y":63},{"x":190,"y":70},{"x":190,"y":77},{"x":180,"y":77},{"x":170,"y":77},{"x":160,"y":77},{"x":150,"y":77},{"x":150,"y":70},{"x":140,"y":63},{"x":140,"y":56},{"x":140,"y":49},{"x":140,"y":42},{"x":150,"y":42},{"x":160,"y":42},{"x":170,"y":42},{"x":180,"y":42},{"x":190,"y":42},{"x":200,"y":42},{"x":200,"y":49},{"x":200,"y":56},{"x":200,"y":63},{"x":200,"y":70},{"x":200,"y":77},{"x":190,"y":84},{"x":180,"y":84},{"x":170,"y":84},{"x":160,"y":84},{"x":150,"y":84},{"x":140,"y":84},{"x":140,"y":77},{"x":140,"y":70},{"x":130,"y":63},{"x":130,"y":56},{"x":130,"y":49},{"x":130,"y":42},{"x":130,"y":35},{"x":140,"y":35},{"x":150,"y":35},{"x":160,"y":35},{"x":170,"y":35},{"x":180,"y":35},{"x":190,"y":35},{"x":210,"y":49},{"x":210,"y":56},{"x":210,"y":63},{"x":210,"y":70},{"x":180,"y":91},{"x":170,"y":91},{"x":160,"y":91},{"x":150,"y":91},{"x":140,"y":91},{"x":130,"y":91},{"x":130,"y":84},{"x":130,"y":77},{"x":130,"y":70},{"x":130,"y":28},{"x":140,"y":28},{"x":150,"y":28},{"x":160,"y":28},{"x":170,"y":28},{"x":180,"y":28},{"x":170,"y":98},{"x":160,"y":98},{"x":150,"y":98},{"x":140,"y":98},{"x":130,"y":98},{"x":150,"y":105},{"x":140,"y":105},{"x":130,"y":105},{"x":140,"y":112},{"x":130,"y":112}]
// // 188.124
var youzhongList = [{ "x": 190, "y": 128 }, { "x": 180, "y": 128 }, { "x": 180, "y": 120 }, { "x": 190, "y": 120 }, { "x": 200, "y": 120 }, { "x": 200, "y": 128 }, { "x": 200, "y": 136 }, { "x": 190, "y": 136 }, { "x": 180, "y": 136 }, { "x": 170, "y": 128 }, { "x": 170, "y": 120 }, { "x": 170, "y": 112 }, { "x": 180, "y": 112 }, { "x": 190, "y": 112 }, { "x": 200, "y": 112 }, { "x": 210, "y": 112 }, { "x": 210, "y": 120 }, { "x": 210, "y": 128 }, { "x": 210, "y": 136 }, { "x": 210, "y": 144 }, { "x": 200, "y": 144 }, { "x": 190, "y": 144 }, { "x": 180, "y": 144 }, { "x": 170, "y": 144 }, { "x": 170, "y": 136 }, { "x": 160, "y": 128 }, { "x": 160, "y": 120 }, { "x": 160, "y": 112 }, { "x": 160, "y": 104 }, { "x": 170, "y": 104 }, { "x": 180, "y": 104 }, { "x": 190, "y": 104 }, { "x": 200, "y": 104 }, { "x": 210, "y": 104 }, { "x": 220, "y": 104 }, { "x": 220, "y": 112 }, { "x": 220, "y": 120 }, { "x": 220, "y": 128 }, { "x": 220, "y": 136 }, { "x": 220, "y": 144 }, { "x": 220, "y": 152 }, { "x": 210, "y": 152 }, { "x": 200, "y": 152 }, { "x": 190, "y": 152 }, { "x": 180, "y": 152 }, { "x": 170, "y": 152 }, { "x": 160, "y": 144 }, { "x": 160, "y": 136 }, { "x": 150, "y": 128 }, { "x": 150, "y": 120 }, { "x": 150, "y": 112 }, { "x": 170, "y": 96 }, { "x": 180, "y": 96 }, { "x": 190, "y": 96 }, { "x": 200, "y": 96 }, { "x": 210, "y": 96 }, { "x": 220, "y": 96 }, { "x": 220, "y": 160 }, { "x": 210, "y": 160 }, { "x": 200, "y": 160 }, { "x": 190, "y": 160 }, { "x": 180, "y": 160 }, { "x": 150, "y": 136 }, { "x": 180, "y": 88 }, { "x": 190, "y": 88 }, { "x": 200, "y": 88 }, { "x": 210, "y": 88 }, { "x": 210, "y": 168 }, { "x": 200, "y": 168 }, { "x": 190, "y": 168 }, { "x": 190, "y": 80 }, { "x": 200, "y": 80 }, { "x": 200, "y": 176 }]
// // 156.187
var youxiaList = [{ "x": 160, "y": 192 }, { "x": 150, "y": 192 }, { "x": 150, "y": 184 }, { "x": 160, "y": 184 }, { "x": 170, "y": 184 }, { "x": 170, "y": 192 }, { "x": 170, "y": 200 }, { "x": 160, "y": 200 }, { "x": 150, "y": 200 }, { "x": 140, "y": 192 }, { "x": 140, "y": 184 }, { "x": 140, "y": 176 }, { "x": 150, "y": 176 }, { "x": 160, "y": 176 }, { "x": 170, "y": 176 }, { "x": 180, "y": 176 }, { "x": 180, "y": 184 }, { "x": 180, "y": 192 }, { "x": 180, "y": 200 }, { "x": 180, "y": 208 }, { "x": 170, "y": 208 }, { "x": 160, "y": 208 }, { "x": 150, "y": 208 }, { "x": 140, "y": 208 }, { "x": 140, "y": 200 }, { "x": 130, "y": 192 }, { "x": 130, "y": 184 }, { "x": 130, "y": 176 }, { "x": 130, "y": 168 }, { "x": 140, "y": 168 }, { "x": 150, "y": 168 }, { "x": 160, "y": 168 }, { "x": 170, "y": 168 }, { "x": 180, "y": 168 }, { "x": 190, "y": 168 }, { "x": 190, "y": 176 }, { "x": 190, "y": 184 }, { "x": 190, "y": 192 }, { "x": 190, "y": 200 }, { "x": 190, "y": 208 }, { "x": 180, "y": 216 }, { "x": 170, "y": 216 }, { "x": 160, "y": 216 }, { "x": 150, "y": 216 }, { "x": 140, "y": 216 }, { "x": 130, "y": 216 }, { "x": 130, "y": 208 }, { "x": 130, "y": 200 }, { "x": 130, "y": 160 }, { "x": 140, "y": 160 }, { "x": 150, "y": 160 }, { "x": 160, "y": 160 }, { "x": 170, "y": 160 }, { "x": 180, "y": 160 }, { "x": 200, "y": 176 }, { "x": 200, "y": 184 }, { "x": 200, "y": 192 }, { "x": 200, "y": 200 }, { "x": 170, "y": 224 }, { "x": 160, "y": 224 }, { "x": 150, "y": 224 }, { "x": 140, "y": 224 }, { "x": 130, "y": 224 }, { "x": 130, "y": 152 }, { "x": 140, "y": 152 }, { "x": 150, "y": 152 }, { "x": 160, "y": 152 }, { "x": 170, "y": 152 }, { "x": 130, "y": 144 }, { "x": 140, "y": 144 }, { "x": 150, "y": 144 }, { "x": 160, "y": 144 }, { "x": 140, "y": 136 }, { "x": 150, "y": 136 }]



//console.log('zuoshangList', zuoshangList.length)



  let myXy = [160,192];
  const XSPACE = 10, YSPACE = 7;
  let arr1 =  youshangList

//myXy = [93,61]; // 左上
//myXy[0] = myXy[0]+XSPACE
//myXy[1] = myXy[1]+YSPACE
//arr1 = [{"x":50,"y":42},{"x":50,"y":49},{"x":50,"y":56},{"x":50,"y":63},{"x":60,"y":35},{"x":60,"y":42},{"x":60,"y":49},{"x":60,"y":56},{"x":60,"y":63},{"x":60,"y":70},{"x":70,"y":28},{"x":70,"y":35},{"x":70,"y":42},{"x":70,"y":49},{"x":70,"y":56},{"x":70,"y":63},{"x":70,"y":70},{"x":70,"y":77},{"x":80,"y":28},{"x":80,"y":35},{"x":80,"y":42},{"x":80,"y":49},{"x":80,"y":56},{"x":80,"y":63},{"x":80,"y":70},{"x":80,"y":77},{"x":80,"y":84},{"x":90,"y":28},{"x":90,"y":35},{"x":90,"y":42},{"x":90,"y":49},{"x":90,"y":56},{"x":90,"y":63},{"x":90,"y":70},{"x":90,"y":77},{"x":90,"y":84},{"x":90,"y":91},{"x":100,"y":28},{"x":100,"y":35},{"x":100,"y":42},{"x":100,"y":49},{"x":100,"y":56},{"x":100,"y":63},{"x":100,"y":70},{"x":100,"y":77},{"x":100,"y":84},{"x":100,"y":91},{"x":100,"y":98},{"x":110,"y":28},{"x":110,"y":35},{"x":110,"y":42},{"x":110,"y":49},{"x":110,"y":56},{"x":110,"y":63},{"x":110,"y":70},{"x":110,"y":77},{"x":110,"y":84},{"x":110,"y":91},{"x":110,"y":98},{"x":110,"y":105},{"x":120,"y":28},{"x":120,"y":35},{"x":120,"y":42},{"x":120,"y":49},{"x":120,"y":56},{"x":120,"y":63},{"x":120,"y":70},{"x":120,"y":77},{"x":120,"y":84},{"x":120,"y":91},{"x":120,"y":98},{"x":120,"y":105}]
//console.log('arr1', arr1.length)



myXy = [165+XSPACE,61+YSPACE]; // 右上
arr1 = [{"x":180,"y":28},{"x":190,"y":35},{"x":130,"y":28},{"x":130,"y":35},{"x":130,"y":42},{"x":130,"y":49},{"x":130,"y":56},{"x":130,"y":63},{"x":130,"y":70},{"x":130,"y":77},{"x":130,"y":84},{"x":130,"y":91},{"x":130,"y":98},{"x":130,"y":105},{"x":130,"y":112},{"x":140,"y":28},{"x":140,"y":35},{"x":140,"y":42},{"x":140,"y":49},{"x":140,"y":56},{"x":140,"y":63},{"x":140,"y":70},{"x":140,"y":77},{"x":140,"y":84},{"x":140,"y":91},{"x":140,"y":98},{"x":140,"y":105},{"x":140,"y":112},{"x":150,"y":28},{"x":150,"y":35},{"x":150,"y":42},{"x":150,"y":49},{"x":150,"y":56},{"x":150,"y":63},{"x":150,"y":70},{"x":150,"y":77},{"x":150,"y":84},{"x":150,"y":91},{"x":150,"y":98},{"x":150,"y":105},{"x":160,"y":28},{"x":160,"y":35},{"x":160,"y":42},{"x":160,"y":49},{"x":160,"y":56},{"x":160,"y":63},{"x":160,"y":70},{"x":160,"y":77},{"x":160,"y":84},{"x":160,"y":91},{"x":160,"y":98},{"x":170,"y":28},{"x":170,"y":35},{"x":170,"y":42},{"x":170,"y":49},{"x":170,"y":56},{"x":170,"y":63},{"x":170,"y":70},{"x":170,"y":77},{"x":170,"y":84},{"x":170,"y":91},{"x":170,"y":98},{"x":180,"y":35},{"x":180,"y":42},{"x":180,"y":49},{"x":180,"y":56},{"x":180,"y":63},{"x":180,"y":70},{"x":180,"y":77},{"x":180,"y":84},{"x":180,"y":91},{"x":190,"y":42},{"x":190,"y":49},{"x":190,"y":56},{"x":190,"y":63},{"x":190,"y":70},{"x":190,"y":77},{"x":190,"y":84},{"x":200,"y":42},{"x":200,"y":49},{"x":200,"y":56},{"x":200,"y":63},{"x":200,"y":70},{"x":200,"y":77},{"x":210,"y":49},{"x":210,"y":56},{"x":210,"y":63},{"x":210,"y":70}] 
console.log('arr1', arr1.length)




// let arr1 = [{"x":90,"y":192},{"x":80,"y":192},{"x":80,"y":184},{"x":90,"y":184},{"x":100,"y":184},{"x":100,"y":192},{"x":100,"y":200},{"x":90,"y":200},{"x":80,"y":200},{"x":70,"y":192},{"x":70,"y":184},{"x":70,"y":176},{"x":80,"y":176},{"x":90,"y":176},{"x":100,"y":176},{"x":110,"y":176},{"x":110,"y":184},{"x":110,"y":192},{"x":110,"y":200},{"x":110,"y":208},{"x":100,"y":208},{"x":90,"y":208},{"x":80,"y":208},{"x":70,"y":208},{"x":70,"y":200},{"x":60,"y":192},{"x":60,"y":184},{"x":60,"y":176},{"x":60,"y":168},{"x":70,"y":168},{"x":80,"y":168},{"x":90,"y":168},{"x":100,"y":168},{"x":110,"y":168},{"x":120,"y":168},{"x":120,"y":176},{"x":120,"y":184},{"x":120,"y":192},{"x":120,"y":200},{"x":120,"y":208},{"x":120,"y":216},{"x":110,"y":216},{"x":100,"y":216},{"x":90,"y":216},{"x":80,"y":216},{"x":70,"y":216},{"x":60,"y":208},{"x":60,"y":200},{"x":50,"y":192},{"x":50,"y":184},{"x":50,"y":176},{"x":70,"y":160},{"x":80,"y":160},{"x":90,"y":160},{"x":100,"y":160},{"x":110,"y":160},{"x":120,"y":160},{"x":120,"y":224},{"x":110,"y":224},{"x":100,"y":224},{"x":90,"y":224},{"x":80,"y":224},{"x":50,"y":200},{"x":80,"y":152},{"x":90,"y":152},{"x":100,"y":152},{"x":110,"y":152},{"x":120,"y":152},{"x":90,"y":144},{"x":100,"y":144},{"x":110,"y":144},{"x":120,"y":144},{"x":100,"y":136},{"x":110,"y":136}]


  function get_near_xy(x,y){
    return {
      x: x - x%XSPACE,
      y: y - y%YSPACE
    }
  }
  function get_xy_max(arr,near_xy){
    let x = arr.sort((a,b)=>a.x-b.x);
    let a = (x[x.length-1].x - x[0].x)/XSPACE;
    let y = arr.sort((a,b)=>a.y-b.y);
    let b = (x[x.length-1].y - x[0].y)/YSPACE;
    if(a <= b){
      return {
        max: (y[y.length-1].y - near_xy.y)/ YSPACE,
        xy: 'y'
      }
      // return {
      //   isxy:'y',
      //   max_y: b+1,
      //   t_y: y[0].y,
      //   b_y: y[y.length-1].y
      // }
    }
    return {
      max: (x[x.length-1].x - near_xy.x)/XSPACE,
      xy:'x'
    }
    // {
    //   isxy:'x',
    //   max_y: a+1,
    //   t_y: x[0].x,
    //   b_y: x[x.length-1].x
    // }
  }
  function xy_data_fn(arr1, arr2){
    let a = Math.abs((arr1.x - arr2.x)) / XSPACE;
    let b = Math.abs((arr1.y - arr2.y)) / YSPACE;
    let xy = a >= b? a+1: b+1;
    let pos = null;
    if(arr1.x <= arr2.x && arr1.y <= arr2.y)pos=1;
    if(arr1.x > arr2.x && arr1.y <= arr2.y)pos=2;
    if(arr1.x > arr2.x && arr1.y > arr2.y)pos=3;
    if(arr1.x <= arr2.x && arr1.y > arr2.y)pos=4;
    // console.log(xy,arr1,arr2)
    return {xy, pos}
    // console.log(a,b)
  }
  function get_data_arr(base, dataarr){
    let arr = [], maxIdx = null;
    let darr = {},dat_arr={};
    dataarr.forEach((ele, i) => {
        let d = xy_data_fn(ele, base);
        ele['_xy'] = d.xy;
        ele['_pos'] = d.pos;
        if(!darr.hasOwnProperty(d.xy))darr[d.xy]=[];
        darr[d.xy].push(ele);
    });
    for(let el in darr){
      dat_arr[el] = {};
      let obj = {};
      darr[el].forEach((ele, idx) => {
        if(!obj.hasOwnProperty(ele._pos))obj[ele._pos]=[];
        obj[ele._pos].push(ele);
      })
      dat_arr[el] = obj
    }

    for(let el in dat_arr){
      for(let ele in dat_arr[el]){
        let a = dat_arr[el][ele];
        if(ele == 1){
          a.sort((a,b) => {
            if(a.x == b.x){
              return b.y-a.y
            }
            return a.x-b.x
          })
        }
        if(ele == 2){
          a.sort((a,b) => {
            if(a.x == b.x){
              return a.y-b.y
            }
            return a.x-b.x
          })
        }
        if(ele == 3){
          a.sort((a,b) => {
            if(a.x == b.x){
              return a.y-b.y
            }
            return b.x-a.x
          })
        }

        if(ele == 4){
          a.sort((a,b) => {
            if(a.x == b.x){
              return b.y-a.y
            }
            return b.x-a.x
          })
        }
        for(let elel in a){
          arr.push(a[elel])
        }
      }
    }
    return arr
  }

  let near_xy = get_near_xy(myXy[0],myXy[1]);
  let data_arr = get_data_arr(near_xy, arr1)









  const create_div_num = 200;
  const boxDom = document.getElementById('div_box');
  const btnDom = document.getElementById('button');
  let div_idx = 0;
  const addClass = (el,className) => {
      if(hasClass(el,className)){
          return
      }
      let newClass=el.className.split(' ')
      newClass.push(className)
      el.className= newClass.join(' ')


  }
  const hasClass = (el,className) => {
      let reg=new RegExp(`(^|\\s)${className}(\\s|$)`)
      return reg.test(el.className)
  }
  const getClassName = (arr) => {
    return 'div_'+arr.x+'_'+arr.y;
  }
  const random = ( min, max) => {
      return Math.round(Math.random() * (max - min));
  }
  const findHypotenuse = (base, perpendicular) => {
   const bSquare = base ** 2;
   const pSquare = perpendicular ** 2;
   const sum = bSquare + pSquare;
   const hypotenuse = Math.sqrt(sum);
   return parseInt(hypotenuse);
  };
  function get_xy_arr(num=30){
    let arr = [];
    for(let i = 0; i < num; i++){
      arr.push([random(0,1000),random(0,800)])
    }
    return arr;
  }
  function domappend(arr,istrue){
    let div = document.createElement('div');
    let classnmaediv = getClassName(arr);
    div.className = istrue?'div2 div':'div';
    div.style.left = arr.x+'px';
    div.style.top = arr.y+'px';
    div.setAttribute('id',classnmaediv)
    boxDom.appendChild(div)
  }
  function ceilNum(a, b){
    return Math.abs(a - b)
  }
  function get_near_num(arr3,arr2, i){
    let arr = arr2[i];
    if(i>arr2.length-1)return arr2;
    if(arr._w){
      i++;
      return get_near_num(arr3,arr2, i)
    };
    let xNum = ceilNum(arr.x,arr3[0]);
    let yNum = ceilNum(arr.y,arr3[1]);
    let num = findHypotenuse(xNum,yNum) ;
    // arr.push(num);
    arr['_w'] = num;
    arr2.forEach((ele, idx) => {
      if(idx == i) return;
      let a_num = findHypotenuse(ceilNum(ele.x,arr3[0]),ceilNum(ele.y,arr3[1])) ;
      if(a_num == num){
        // ele.push(num);
        ele['_w'] = num;
      }
    })
    i++;
    return get_near_num(arr3,arr2, i)

  }

  function get_arr_near(arr, i, arr1){
    let a = arr[i];
    // console.log(a,i)
    if(i > arr.length-1)return arr1;
    if(a._e){
      i++;
      return get_arr_near(arr, i, arr1)
    }

    let b = [a];
    arr.forEach((el,idx) => {
      if(idx == i)return;
      if(el._w == a._w){
        b.push(el);
        el['_e'] = true;
      };
    });
    arr1.push(b);
    i++;
    return get_arr_near(arr, i, arr1)
  };

  function tblr_arr(arr,idx,myxy){
    if(idx > arr.length-1)return arr;
    let a = arr[idx];
    let arr1 = [];
    let b = [],c = [],d = [], e = [];
    a.forEach(el=>{
      if(el.x - myxy[0] >= 0 && el.y - myxy[1] >= 0) c.push(el);
      if(el.x - myxy[0] >= 0 && el.y - myxy[1] < 0) b.push(el);
      if(el.x - myxy[0] < 0 && el.y - myxy[1] >= 0) d.push(el);
      if(el.x - myxy[0] < 0 && el.y - myxy[1] < 0) e.push(el);
    });
    b.sort((a,b)=>a.x-b.x);
    c.sort((a,b)=>b.x-a.x);
    d.sort((a,b)=>b.x-a.x);
    e.sort((a,b)=>a.x-b.x);
    arr1 = [...b,...c,...d,...e]
    // arr1.push(b);
    // arr1.push(c);
    // arr1.push(d);
    // arr1.push(e);
    arr[idx] = arr1;
    idx++;
    return tblr_arr(arr,idx,myxy);
  }

  function amitonDiv(arr,idx){

  }

  // function getMaxCile(data){
  //   console.log(data);
  // }

  // get_xy_arr(create_div_num);

  domappend({x:myXy[0],y:myXy[1]},true);
  arr1.forEach((item, i) => {
    domappend(item);
  });

  // let near_num =  get_near_num(myXy, arr1, 0 ,[]).sort((a,b)=> a._w-b._w);
  // let basedata = near_num[0];
  // basedata['_level'] = 0;
  // getMaxCile(near_num[near_num.length-1]);
  // test(basedata,near_num,1);


  // let near_arr = get_arr_near(near_num, 0 ,[]);
  // console.log(basedata)
  // let data_arr = tblr_arr(near_arr,0,myXy).flatMap((item) => item);

  btnDom.onclick = function(){
    if(div_idx > data_arr.length - 1)return alert('没有了！')
    
    console.log('div_idx',data_arr[div_idx])
    let datas = data_arr[div_idx];
    let classNa = getClassName(datas);
    let doms = document.getElementById(classNa);
    addClass(doms, 'hover_div')
    div_idx++;
      // console.log(21651);
  }

  //
  let newData_arr = []
  for (let index = 0; index < data_arr.length; index++) {
    let element = data_arr[index];
    newData_arr.push({x:element.x, y:element.y})
  }
    console.log(JSON.stringify(newData_arr));
  // console.log(arr1)

</script>
</html>
